<!-- 主页面 -->
<template>
    <el-container class="el-container">
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu
            class="el-menu"
            background-color="#32323a"
					   :unique-opened="true"
					   text-color="#ffffff"
             :default-active="$router.path"
					   :router="true">
            <MenuTree :menuList="menuList" ref="menuTree"></MenuTree>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
import MenuTree from '@/components/common/menu/menuTree.vue'
import  * as utils from '@/utils/menu.js'
export default {
  data () {
    return {
      menuList: [
        {
          name: '首页',
          url: '/',
          id: 1
        },
        // {
        //   name: '组织管理',
        //   id: '2',
        //   children: [
        //     {
        //       name: '组织架构管理',
        //       url: '/org/structure',
        //       id: 3
        //     },
        //     {
        //       name: '法人公司',
        //       url: '/org/legal-person',
        //       id: 4
        //     }
        //   ]
        // },
        {
          name: '工单分析',
          id: 'gdfx',
          children: [
            {
              name: '工单报表',
              id: 'gdbb',
              children: [
                {
                  name: '月度工单模块分析',
                  id: 'ydmk',
                  url: '/promblemOrder/orderReport/month-module'
                },
                {
                  name: '月度工单总量趋势',
                  id: 'ydmk',
                  url: '/promblemOrder/orderReport/month-trend'
                }
              ]
            },
            {
              name: '工单导入',
              id: 'gddr',
              children: [
                {
                  name: '导入工单文件',
                  url: '/promblemOrder/orderImport/import'
                },
                {
                  name: '查看导入工单数据',
                  url: '/promblemOrder/orderImport/query'
                }
              ]
            }
          ]
        },
        {
          name: 'eCharts图表',
          id: 5,
          children: [
            {
              name: '地图',
              url: '/eCharts/chinaMap',
              id: 6
            }
          ]
        }
      ]
    };
  },

  components: {
    MenuTree
  },

  computed: {},
  mounted() {
    let menu_list = [{
          id: '1',
          menu_name: '设置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          menu_name: '权限设置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          menu_name: '用户管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          menu_name: '用户管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          menu_name: '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-2',
          menu_name: '菜单设置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          menu_name: '菜单列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          menu_name: '菜单添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          menu_name: '订单',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          menu_name: '报单审核',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          menu_name: '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }, {
          id: '2-2-1',
          menu_name: '退款管理2-1',
          menu_url: 'order.refundmanagement',
          parent_id: '2-2'
        }
    ]
    utils.format({arrayList: menu_list})
    console.log('this.$refs.menuTree=', this.$refs.menuTree)
  },
  methods: {}
}

</script>
<style lang='less' scoped>
.el-container{
  padding: 0px;
  margin: 0px;
  height: 100hv
}
 .el-header, .el-footer {
    /* 顶部部分的高度(默认60px) */
    background-color: #0077d5;
    color: #FFFFFF;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
  }
  
  .el-aside {
    width: 200px;
    background-color: #32323a;
    min-height: calc(100vh - 60px);
  }
  .el-menu {
    width: 200px;
    min-height:100%;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 50px;
  }
</style>